<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
import { getMedicalOrderLogistics } from "@/apis/payment";
import type { ExpressData } from "@/types/order";
import { onMounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import startImg from "@/static/images/start.png";
import endImg from "@/static/images/end.png";
import carImg from "@/static/images/car.png";
import { mapState } from "pinia";

const pageParams = defineProps<{ id: string }>();

const logisticsInfo = ref({} as ExpressData);
const getData = async () => {
  const res = await getMedicalOrderLogistics(pageParams.id);
  // console.log(res)
  logisticsInfo.value = res;
};

let map: any = null;

onMounted(async () => {
  await getData();
  // 配置密钥，需补充类型声明文件
  window._AMapSecurityConfig = {
    securityJsCode: "e257a239694539e98cefbb38474a512a",
  };

  // 配置 key
  const AMap = await AMapLoader.load({
    key: "4377f8a5373da9c53f6903ca044bc9c9",
    version: "2.0",
    plugins: [],
  });

  // 使用 Amap 初始化地图
  // !!!!! 注意：容器名称为 map，与页面 <view id="map"> 的 id 一致
  map = new AMap.Map("map", {
    // 设置地图容器id
    viewMode: "3D", // 是否为3D地图模式
    zoom: 11, // 初始化地图级别
    center: [116.397428, 39.90923], // 初始化地图中心点位置
    mapStyle: "amap://styles/whitesmoke", // 设置地图样式
  });

  // 加载驾驶导航插件
  AMap.plugin("AMap.Driving", () => {
    // 创建驾车导航实例(用于物流展示)
    const driving = new AMap.Driving({
      map: map, // 指定轨迹显示地图实例
      showTraffic: false, // 关闭交通状态
      hideMarkers: true, // 隐藏默认的标记
    });

    // 起始点和终点
    const start = logisticsInfo.value.logisticsInfo.shift();
    const end = logisticsInfo.value.logisticsInfo.pop();
    // 途经点，需要用 map 调整为经纬度数组(先长Long后短Lat)
    const waypoints = logisticsInfo.value.logisticsInfo.map((v) => [
      v.longitude,
      v.latitude,
    ]);

    // 搜索路径(起始点, 终点, 回调函数)
    driving.search(
      [start?.longitude, start?.latitude], // 起始点
      [end?.longitude, end?.latitude], // 终点
      { waypoints: waypoints }, // 途径点
      (status: string, result: object) => {
        // 回调函数
        console.log(status, result);
        // 起始点标记
        const startMarker = new AMap.Marker({
          icon: startImg, // 自定义图片
          position: [start?.longitude, start?.latitude], // 经纬度
          anchor: "bottom-center", // 图片位置
        });
        map?.add(startMarker);

        // 终点
        const endMarker = new AMap.Marker({
          icon: endImg, // 自定义图片
          position: [end?.longitude, end?.latitude], // 经纬度
          anchor: "bottom-center", // 图片位置
        });
        map?.add(endMarker); // 把标记点添加到地图中

         // 当前货车位置
         const carMarker = new AMap.Marker({
            icon: carImg, // 自定义图片
            position: [
              logisticsInfo.value.currentLocationInfo.longitude,
              logisticsInfo.value.currentLocationInfo.latitude,
            ], // 经纬度
            anchor: 'center', // 图片位置
          })
          map.add(carMarker)

          // 3s后，定位到货车，放大地图
          setTimeout(() => {
            // 设置地图中心点（会根据覆盖物自动计算）
            map.setFitView([carMarker])
            // 设置缩放级别
            map.setZoom(10)
          }, 3000)
      }
    );
  });
});
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <view id="map" class="uni-map"></view>
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ logisticsInfo?.statusValue }}</cover-view>
      <cover-view class="extra">
        预计 {{ logisticsInfo.estimatedTime }} 送达
        {{ logisticsInfo.name }}
        {{ logisticsInfo.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content">
            收货地址：广东省广州市大华区明离路科技园880号
          </view>
        </view>
        <view v-for="item in logisticsInfo.list" :key="item.id" class="line">
          <!-- 1已发货 2已揽件 3 运输中 4 派送中 5已签收 -->
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-else-if="item.status === 4">
            <uni-icons
              color="#2cb5a5"
              custom-prefix="iconfont"
              type="icon-truck"
            />
          </view>
          <view class="badge icon" v-else-if="item.status === 5">
            <uni-icons
              color="#2cb5a5"
              custom-prefix="iconfont"
              type="icon-checked"
            />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">{{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import "./index.scss";
</style>
